<template>
  <div id="bk" class="wrapper">
    <div class="login-box">
      <div class="title">
        <b>注 册</b>
      </div>
      <div style="margin-top: 30px">
        <el-form label-width="70px">
          <el-form-item label="用户名">
            <el-input
              v-model.trim="user.username"
              aria-required="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" style="margin-top: 25px">
            <el-input
              v-model.trim="user.password"
              show-password
              aria-required="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" style="margin-top: 25px">
            <el-input
              v-model.trim="user.confirmPassword"
              show-password
              aria-required="true"
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="success" @click="onSubmit" style="font-size: 22px">
              注册
            </el-button>
            <el-button @click="$router.push('/login')" style="font-size: 22px">
              返回登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import md5 from "js-md5";

const store = useStore();
const router = useRouter();

// Reactive data
const user = ref<any>({
  username: "",
  password: "",
  confirmPassword: "",
});

// Methods
const onSubmit = () => {
  if (
    !user.value.username ||
    !user.value.password ||
    !user.value.confirmPassword
  ) {
    store.state.message.error("账号或密码不能为空");
    return;
  }
  if (user.value.password !== user.value.confirmPassword) {
    store.state.message.error("两次密码不一致");
    return;
  }

  const form = {
    ...user.value,
    password: md5(user.value.password),
  };

  store.state.request.post("/register", form).then((res: any) => {
    if (res.code === "200") {
      store.state.message.success("注册成功");
      router.push("/login");
    } else {
      store.state.message.error(res.msg);
    }
  });
};
</script>

<style scoped>
.wrapper {
  height: 100vh;
  background-color: #006400;
  overflow: auto;
}
.login-box {
  margin: 220px auto;
  padding: 40px;
  width: 450px;
  height: 310px;
  background-color: #ffffff;
  border-radius: 10px;
}
.title {
  text-align: center;
  margin-top: 10px;
  font-size: 25px;
  color: #006400;
}

#bk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url("../resource/01.jpg") center top / cover no-repeat;
}
</style>
